<template>
  <div class="_main">
    <div class="top">
      <span><b>咨询师ID</b></span>
      <input type="text" placeholder="请输入咨询师ID" v-model="queryInfo.consultId" />
      <span><b>用户ID</b></span>
      <input type="text" placeholder="请输入用户ID" v-model="queryInfo.userId" />
      <span><b>咨询ID</b></span>
      <input type="text" placeholder="请输入咨询ID" v-model="queryInfo.appId" />
      <span><b>评价等级</b></span>
      <input type="text" placeholder="请输入评价等级" v-model="queryInfo.markStar" />
      <div style="background-color: #3E9AF9;border: solid 1px #3E9AF9;cursor: pointer;" @click="getList">
        <el-icon>
          <Search />
        </el-icon>
        <button class="but1">搜索</button>
      </div>
      <div style="background-color: white;color: #000;border: solid 1px black;cursor: pointer;" @click="reset">
        <el-icon>
          <Refresh />
        </el-icon>
        <button class="but2">重置</button>
      </div>
    </div>
    <div class="top2">
      <el-button type="primary" icon="Plus" @click="add" plain>新增</el-button>
      <el-button type="primary" icon="Sort" @click="shrink" blue>展开/折叠</el-button>
    </div>
    <div class="table1">
      <el-table :data="tableData" :style="{ height: num + 'px' }" style="width: 100%">
        <el-table-column fixed prop="id" label="评价ID" width="50" />
        <el-table-column prop="user.name" label="用户姓名" width="100" />
        <el-table-column prop="createTime" label="评价时间" width="120" />
        <el-table-column prop="markText" label="评价内容" width="80">
          <template #default="scope">
            <el-button link type="primary" v-if="scope.row.markText!=null" @click="details(1,scope.row)">
              <el-icon><Help /></el-icon>
              <span>详情</span>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="appId" label="咨询ID" width="120" />
        <el-table-column prop="user.phone" label="用户电话" width="120" />
        <el-table-column prop="consult.name" label="咨询师姓名" width="120" />
        <el-table-column prop="markStar" label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;评价等级" width="150">
          <template #default="scope">
            <div class="demo-rate-block">
              <el-rate v-model="scope.row.markStar" :colors="colors" clearable />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="appointment.content" label="咨询内容" width="120" >
          <template #default="scope">
            <!-- {{ scope.row.appointment!=null }} -->
            <el-button link type="primary" v-if="scope.row.appointment!=null" @click="details(2,scope.row)">
              <el-icon><Help /></el-icon>
              <span>详情</span>
            </el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right"
          label="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;操作"
          min-width="150">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="modify(scope.row)">
              <el-icon>
                <EditPen />
              </el-icon>
              <span>修改</span>
            </el-button>
            <el-button link type="primary" size="small" @click="deletes(scope.row.id)">
              <el-icon>
                <DeleteFilled />
              </el-icon>
              <span>删除</span>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye">
        <el-pagination v-model:current-page="queryInfo.pageNum" v-model:page-size="queryInfo.pageSize"
          :page-sizes="[1, 10, 50, 100]" size="default" background="false"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" />
      </div>
      <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle" width="500">
        <el-form :model="userMark">
          <el-form-item label="评价ID" :label-width="formLabelWidth">
            <el-input v-model="userMark.id" autocomplete="off" style="margin-left: 15px;"/>
          </el-form-item>
          <el-form-item label="评价时间" :label-width="formLabelWidth">
            <el-input v-model="userMark.createTime" autocomplete="off" />
          </el-form-item>
          <el-form-item label="评价内容" :label-width="formLabelWidth">
            <quill-editor v-model:value="userMark.markText" />
          </el-form-item>
          <el-form-item label="咨询师ID" :label-width="formLabelWidth">
            <el-input v-model="userMark.consultId" autocomplete="off" />
          </el-form-item>
          <el-form-item label="用户ID" :label-width="formLabelWidth">
            <el-input v-model="userMark.userId" autocomplete="off" style="margin-left: 15px;"/>
          </el-form-item>
          <el-form-item label="评价等级" :label-width="formLabelWidth">
            <el-input v-model="userMark.markStar" autocomplete="off" />
          </el-form-item>
          <el-form-item label="咨询ID" :label-width="formLabelWidth">
            <el-input v-model="userMark.appId" autocomplete="off" style="margin-left: 15px;"/>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="saveOrUpdate">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog v-model="detailsVisible" :title="detailsInfor.content!=null?'咨询内容':'评价内容'" width="1000" 
            @close="clearInfor()">
              <quill-editor v-if="detailsInfor.content!=null" v-model:value="detailsInfor.content" />
              <quill-editor v-if="detailsInfor.markText!=null" v-model:value="detailsInfor.markText" />
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import axios from 'axios';
import { ElMessageBox, ElMessage, } from 'element-plus';
import { ref, onMounted } from 'vue';
import QuillEditor from '@/components/QuillEditor.vue';
const total = ref(0)
const saveOrUpdateVisible = ref(false);
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])
const num = ref(540);
const shrink = () => {
  if (num.value == 540) {
    num.value = 40
  } else {
    num.value = 540
  }
}


const detailsVisible = ref(false);
const userMark = ref({
  id: 0,
  markText: '',
  markStar: 0,
  createTime: '',
  consultId: 0,
  userId: 0,
  appId: 0,
  consult: {
    id: 0,
    name: '',
  },
  user: {
    id: 0,
    name: '',
    phone: ''
  },
  appointment: {
    id: 0,
    content: ''
  }
})

function clearInfor() {
    detailsInfor.value.content = null;
    detailsInfor.value.markText = null;
}
const saveOrUpdateTitle = ref('添加评价信息');
const modify = row => {
  saveOrUpdateVisible.value = true;
  saveOrUpdateTitle.value = '修改评价信息';
  userMark.value = row;
}
const add = () => {
  saveOrUpdateVisible.value = true;
  saveOrUpdateTitle.value = '添加评价信息';
  userMark.value = {
    id: 0,
    markText: ' ',
    markStar: 0,
    createTime: '',
    consultId: 0,
    userId: 0,
    appId: 0,
  }
}
const close = () => {
  saveOrUpdateVisible.value = false;

  userMark.value = {
    id: 0,
    markText: '',
    markStar: 0,
    createTime: '',
    consultId: 0,
    userId: 0,
    appId: 0,
  }
}
const saveOrUpdate = () => {
  saveOrUpdateVisible.value = false;
  if (saveOrUpdateTitle.value == '添加评价信息') {
    axios.post('/UserMarkController/insertUserMark', userMark.value)
      .then(response => {
        let result = response.data;
        if (result.code == 1) {
          getList();
          ElMessage({
            message: '添加成功！',
            type: 'success',
          })
        } else {
          ElMessage({
            message: '添加失败！',
            type: 'warning',
          })
        }
      })
  } else {
    axios.put('/UserMarkController/updateUserMarkById', userMark.value)
      .then(response => {
        let result = response.data;
        if (result.code == 1) {
          getList();
          ElMessage({
            message: '修改成功！',
            type: 'success',
          })
        } else {
          ElMessage({
            message: '修改失败！',
            type: 'warning',
          })
        }
      })
  }
  userMark.value = {
    id: 0,
    markText: '',
    markStar: 0,
    createTime: '',
    consultId: 0,
    userId: 0,
    appId: 0,
  }
}
const reset = () => {
  queryInfo.value = {
    pageNum: 1,
    pageSize: 10,
    consultId: '',
    userId: '',
    markStar: 0,
    appId: 0
  }
  getList();
}
const deletes = id => {
  ElMessageBox.confirm(
    '是否确认删除这条数据？',
    '系统提示',
    {
      cancelButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      axios.delete('/UserMarkController/deleteUserMarkById/' + id)
        .then(response => {
          let result = response.data;
          if (result.code == 1) {
            getList();
            ElMessage({
              message: '删除成功！',
              type: 'success',
            })
          } else {
            ElMessage({
              message: '删除失败！',
              type: 'warning',
            })
          }
        })
    })
    .catch(() => { })
}

const detailsInfor = ref({
    content: null,
    markText: null,
})

function details(n,row) {
  detailsVisible.value = true;
  //console.log(n);
  //console.log(row);
  
  if(n==1){
    detailsInfor.value.markText = row.markText;
  }else{
    detailsInfor.value.content = row.appointment.content;  
  }


}


const handleSizeChange = (val) => {
  queryInfo.value.pageSize = val;
  queryInfo.value.pageNum = 1;
  getList();
}
const handleCurrentChange = (val) => {
  queryInfo.value.pageNum = val;
  getList();
}
const queryInfo = ref({
  pageNum: 1,
  pageSize: 10,
  consultId: '',
  userId: '',
  markStar: 0,
  appId: 0
})
onMounted(() => {
  // console.log('onMounted');
  getList();
})
const tableData = ref([])
const getList = () => {
  axios.get('/UserMarkController/selectUserMarkAll', {
    params: queryInfo.value
  })
    .then(response => {
      let result = response.data;
      if (result.code == 1) {
        total.value = result.data.total;
        tableData.value = result.data.list;
      } else {
        console.log(error);
      }
    })
}
</script>
<style scoped>
._main {
  width: 1190px;
  height: 690px;
  position: relative;
  top: 0px;
  left: 0px;
}

.top {
  width: 1160px;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.top>input {
  width: 180px;
  height: 25px;
  border: solid 1px #E6E8ED;
  border-radius: 5px;
  outline-color: #1890FF;
}

select {
  width: 150px;
  height: 28px;
  border: solid 1px #E6E8ED;
  border-radius: 5px;
  outline-color: #1890FF;
}

.top>div {
  background-color: blue;
  height: 25px;
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  border-radius: 5px;
}

button {
  border: none;
}

.but1 {
  color: white;
  background-color: #3E9AF9;
}

.but2 {
  color: black;
  background-color: white;
}

.top2 {
  width: 220px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: absolute;
  left: 30px;
}

.table1 {
  margin-top: 40px;
}

hr {
  padding: 5px;
  border: none;
}

.fenye {
  position: absolute;
  top: 675px;
  left: 320px;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.demo-rate-block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
}

.demo-rate-block:last-child {
  border-right: none;
}

.demo-rate-block .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>